<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="p-3">
      <view class="overflow-hidden bg-white rounded">
        <template v-if="info?.status === OrderStatusEnum.WAITSIGNED">
          <view class="h-1 u-primary-bg"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xe605;</i>
            <text class="pl-1">待签收</text>
          </view>
        </template>
        <template v-else-if="info?.status === OrderStatusEnum.PHARMACY">
          <view class="h-1 u-success-bg"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xe65f;</i>
            <text class="pl-1">待发货</text>
          </view>
        </template>
        <template v-else-if="info?.status === OrderStatusEnum.EXPRERT">
          <view class="h-1 u-error-bg"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xe64c;</i>
            <text class="pl-1">已等待</text>
            <text v-if="info?.createTime" class="pl-1 u-error">
              {{ awaitTime(info.createTime).desc }}
            </text>
          </view>
        </template>
        <template v-else-if="info?.status === OrderStatusEnum.DONE">
          <view class="h-1 bg-[#13ce66]"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xe60f;</i>
            <text class="pl-1">已完成</text>
          </view>
        </template>
        <template v-else-if="info?.status === '4'">
          <view class="h-1 bg-[#909399]"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xe60e;</i>
            <text class="pl-1">已取消</text>
          </view>
        </template>
        <template v-else-if="info?.status === '5'">
          <view class="h-1 bg-[#ff4949]"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xe896;</i>
            <text class="pl-1">交易关闭</text>
          </view>
        </template>
        <template v-else-if="info?.status === '6'">
          <view class="h-1 u-success-bg"></view>
          <view class="flex justify-center items-center py-3">
            <i class="iconfont">&#xeb6e;</i>
            <text class="pl-1">待采购</text>
          </view>
        </template>
      </view>

      <view class="pb-3 mt-3 bg-white rounded">
        <view class="flex justify-between px-3 py-2 borderBottom">
          <view class="text-base font-medium">处方金额</view>
          <view class="u-error">
            <text>￥</text>
            <text v-if="info" class="text-xl">
              {{ (info?.costOriginal - info?.expressCost - info.dosageformCost).toFixed(2) }}
            </text>
          </view>
        </view>
        <view
          v-for="(sheetItem, sheetIndex) in info?.sheetList"
          :key="sheetIndex"
          class="px-3 mt-1">
          <view class="flex py-2 pb-2">
            <u-tag :text="sheetItem.dictLabel" plain size="mini"></u-tag>
            <text class="pl-3">
              <u-tag v-if="info.parescriptOrder && info.parescriptOrder.dosageformValue" class="pr-3" plain type="warning" size="mini" :text="getDictLabel(dosageformOptions, info.parescriptOrder.dosageformValue)"></u-tag>
              <template v-if="info.parescriptOrder && info.parescriptOrder.regulateDosage">
                <text class="px-[2rpx]">共{{info.parescriptOrder.regulateDosage.courseNum}}疗程</text>
                <text class="px-[2rpx]">，{{ sheetItem.prescriptNum }}剂</text>
                <text v-if="sheetItem.takeType === 1" class="px-[2rpx]">，口服</text>
                <text v-if="sheetItem.takeType === 2" class="px-[2rpx]">，外用</text>
                <text class="px-[2rpx]">，每日{{ info.parescriptOrder.regulateDosage.usageDose }}次</text>
                <text class="px-[2rpx]">，每次{{ info.parescriptOrder.regulateDosage.onceDose }}袋/格</text>。
              </template>
              <template v-else>
                <text v-if="sheetItem.serviceItems == 4 && sheetItem.prescriptNum">共{{ sheetItem.prescriptNum }}剂</text>
                <text v-else>共 {{ sheetItem.itemNum }} 项</text>
                <text v-if="sheetItem.takeType === 1" class="px-[2rpx]">，口服</text>
                <text v-if="sheetItem.takeType === 2" class="px-[2rpx]">，外用</text>
                <text v-if="sheetItem.usageDose" class="px-[2rpx]">，每日{{ sheetItem.usageDose }}次</text>
                <text v-if="sheetItem.usageDose" class="px-[2rpx]">，每次{{ sheetItem.onceDose || 1 }}袋/格</text>
                <text v-if="sheetItem.dictLabel === '中药颗粒'">，开水冲泡，待温口服</text>。
              </template>
            </text>
          </view>
          <!-- <view class="grid grid-cols-3 gap-2 p-2 bg-[#F5F5F5] rounded">
            <view v-for="checkItem in sheetItem.checkItem" :key="checkItem.itemId" class="line-clamp-1">
              <text>{{ checkItem.itemName }}</text>
              <text>{{ checkItem.specsNum }}{{ checkItem.unit || "项" }}</text>
            </view>
          </view> -->
        </view>
      </view>

      <view class="pb-3 mt-3 bg-white rounded">
        <view class="px-3 py-2 text-base font-medium borderBottom">
          诊断医生
        </view>
        <view class="px-3">
          <UserCard
            :avatar="info?.sponsorInfo.headimg"
            :userName="info?.sponsorInfo.userName"
            :deptName="info?.sponsorInfo.deptname"
            :postName="info?.sponsorInfo.postName"
            :com="info?.sponsorInfo.com"
            :mobile="info?.sponsorInfo.mobile"></UserCard>
        </view>
      </view>

      <view class="pb-3 mt-3 bg-white rounded">
        <view class="px-3 py-2 text-base font-medium borderBottom">
          订单信息
        </view>
        <view class="px-3 py-1">
          <view class="py-2">
            <text class="u-tips-color">订单编号：</text>
            <text>{{ info?.orderNo }}</text>
          </view>
          <view>
            <text class="u-tips-color">开单时间：</text>
            <text>{{ info?.createTime }}</text>
          </view>
        </view>
      </view>

      <view v-if="info && info.mailingInfo" class="pb-1 mt-3 bg-white rounded">
        <view class="px-3 py-2 text-base font-medium borderBottom">
          物流信息
        </view>
        <view class="p-3 m-2 rounded-md u-info-light-bg">
          <view v-if="info.mailingInfo.logisticType === 0 && info.mailingInfo.mailingWay === 3">快递（邮寄给患者）</view>
          <view v-if="info.mailingInfo.logisticType === 0 && info.mailingInfo.mailingWay === 2">快递（邮寄给诊所）</view>
          <view v-if="info.mailingInfo.logisticType === 1">配送点自取</view>
          <view v-if="info.mailingInfo.logisticType === 2">无需物流</view>
          <view v-if="info.mailingInfo.logisticType === 3">同城配送</view>
          <template v-if="info.mailingInfo.logisticType === 0 || info.mailingInfo.logisticType === 3">
            <view class="flex items-center pt-2 leading-8">
              <text>{{ info.mailingInfo.recipientName }}</text>
              <text class="pl-3">
                {{ maskPhone(info.mailingInfo.recipientPhone) }}
              </text>
            </view>
            <view>
              {{ info.mailingInfo.province + info.mailingInfo.mailingAddr }}
            </view>
            <view
              v-if="info.mailingInfo.expressNumber"
              class="pt-2 mt-2 borderTop">
              <text>配送信息：</text>
              <text>{{ info.mailingInfo.expressBrand }}</text>
              <text class="pl-2 u-primary" @click="copyText(info.mailingInfo.expressNumber)">
                {{ info.mailingInfo.expressNumber }}
              </text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from '@/components/userCard.vue'
import { awaitTime, maskPhone } from '@/utils'
import { getOrderDetail } from '@/api/order'
import { OrderItmeTypes } from '@/types/order'
import { OrderStatusEnum } from '@/utils/enums'
import { dictData, DictItemTypes, getDictLabel } from '@/api/dict'

const info = ref<OrderItmeTypes>()
const getData = (id: number) => {
  if (!id) return
  getOrderDetail(id).then((res) => {
    info.value = res.data
  })
}

onLoad((options) => {
  getData(options?.id)
})

const copyText = (text: string) => {
  uni.setClipboardData({
    data: text, // 这里填写你想要复制到剪贴板的数据
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
        duration: 2000
      })
    },
    fail: function (err) {
      console.error('复制失败', err)
    }
  })
}

// 获取剂型列表
const dosageformOptions = ref<DictItemTypes[]>([])
const getDosageformOptions = async () => {
  const { data } = await dictData('tcm_dosageform_type') // 获取字典中的数据
  dosageformOptions.value = data
}
getDosageformOptions()
</script>

<style lang="scss" scoped></style>
